<template>
  <div class="bgc-default pad-20">
    <el-card v-if="taskForm.taskNo" class="box-card">
      <div class="store-title-bar flex v-align-c pad-b-10">
        <div class="store-staute" :class="taskForm.status === 3 || taskForm.status === 4 ? 'enable' : 'disable'">
          {{ taskForm.statusLabel }}
        </div>
        <h2>批量操作单号：{{taskForm.taskNo}}</h2>&nbsp;&nbsp;
        <el-tooltip v-if="taskForm.statusRemark" class="item" effect="dark" :content="taskForm.statusRemark"
          placement="top-end">
          <el-link type="primary" :underline="false">异常</el-link>
        </el-tooltip>
      </div>
      <el-row :gutter="20" class="store-info-box">
        <el-col :span="6">
          <div class="pad-t-1 pad-b-1 flex v-align-t">
            <span
              class="flex-item">共{{taskForm.totalNumber}}件商品，其中{{ taskForm.totalSuccessNumber ? taskForm.totalSuccessNumber : 0 }}件成功，{{taskForm.totalFailNumber ? taskForm.totalFailNumber : 0}}件失败</span>
          </div>
          <div class="pad-t-1 pad-b-1 flex v-align-t">
            <span>操作人：</span>
            <span class="flex-item">{{taskForm.operatorName}} {{taskForm.operatorPhone}}</span>
          </div>
          <div class="pad-t-1 pad-b-1 flex v-align-t">
            <span>操作时间：</span>
            <span class="flex-item">{{taskForm.createTime}}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card" v-if="taskForm.status === 1">
      <div slot="header" class="clearfix">
        <span class="header_title">基本信息</span>
      </div>
      <div v-if="taskForm.modifyType === 3" :style="modifyTypeSkuFlag === 0 ?'margin-bottom: 10px;':''">
        <template>
          <span><b style="color: red;">*</b>规格类型：</span>
          <el-radio-group v-model="modifyTypeSkuFlag" @change="handleModifyTypeSkuFlag">
            <el-radio :label="0">单规格</el-radio>
            <el-radio :label="1">多规格</el-radio>
          </el-radio-group>
        </template>
      </div>
      <div v-if="modifyTypeSkuFlag === 0">
        <span><b style="color: red;">*</b>选择修改：</span>
        <template v-if="taskForm.modifyType === 1 || taskForm.modifyType === 2 || taskForm.modifyType === 3">
          <el-checkbox-group v-model="modifyFieldsArray" style="display: inline;">
            <el-checkbox @change="((isCheck) =>{handleCheckIsSelect(isCheck,item.fieldId)})"
              v-for="(item,index) in taskForm.allModifyFields" :label="item.fieldId"
              :key="taskForm.modifyType + item.fieldId" :value="item.fieldId"
              v-if="item.fieldId !== 12 && item.fieldId !== 13 && item.fieldId !== 33 && item.fieldId !== 34  && item.fieldId !== 39">
              {{item.fieldLabel}}
            </el-checkbox>
          </el-checkbox-group>
        </template>
        <template v-if="taskForm.modifyType === 4">
          <el-radio v-model="taskForm.modifyFields" v-for="item in taskForm.allModifyFields"
            :key="taskForm.modifyType + item.fieldId" :label="item.fieldId" :value="item.fieldId">{{item.subFieldLabel}}
          </el-radio>
        </template>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="header_title">商品明细</span>
        <el-tooltip class="item" effect="light" placement="right" v-if="taskForm.status === 1">
          <div slot="content">
            商品明细列表操作数据，是实时保存的
          </div>
          <i class="el-icon-question"></i>
        </el-tooltip>
      </div>
      <div>
        <!-- 全选、操作 -->
        <div class="pad-b-15 font-14 v-align-c" v-if="taskForm.status === 1">
          <el-button icon="el-icon-refresh" circle v-if="total > 0" @click="getTaskGoodsList"></el-button>
          <el-button type="primary" @click="selectGoods">添加商品</el-button>
          <el-button @click="importGoods">批量导入</el-button>
          <el-button type="text" @click="downImportTemplate" class="mar-l-10">下载导入模板</el-button>
        </div>
        <!-- 内容列表 -->
        <div class="table-container">
          <!-- 操作区域 -->
          <div class="tabs-box" v-if="taskForm.status === 2 || taskForm.status === 3 ||taskForm.status === 4">
            <el-tabs type="card" v-model="queryParams.status" class="member-list-tab" @tab-click="handleClick">
              <el-tab-pane label="全部" name="-1"></el-tab-pane>
              <el-tab-pane label="待修改" name="0"></el-tab-pane>
              <el-tab-pane label="失败" name="1"></el-tab-pane>
              <el-tab-pane label="成功" name="2"></el-tab-pane>
            </el-tabs>
          </div>
          <el-table ref="multipleTable" :data="taskRecordList" v-loading="listLoading"
            :element-loading-text="loadingText" style="width: 100%" header-cell-class-name="default-header"
            row-class-name="default-row" :empty-text="emptyText">
            <el-table-column width="55px" type="index" fixed="left" />
            <el-table-column
              :width="modifyFieldsArray.length || (taskForm.modifyType === 4 && total > 0) > 0 ?'250px':null" label="商品"
              fixed="left" key="-1">
              <template slot-scope="scope">
                <div class="flex v-align-c cursor-p mar-r-30">
                  <label><img :src="scope.row.mainImage" class="user-avatar cursor-p"></label>
                  <div class="font-14 pad-l-10 v-align-h">
                    <div class="goods-title">
                      <div class="line-2">
                        <!-- <template v-if="scope.row.categoryName">
                          <el-tag size="mini" v-if="scope.row.skuFlag == 1" type="danger" effect="light">多</el-tag>
                        </template> -->
                        {{scope.row.originTitle}}
                      </div>
                    </div>
                    <template v-if="scope.row.skuDetail">
                      <span class="font-color-6 font-13 line-2">{{scope.row.skuDetail}}</span>
                    </template>
                  </div>
                </div>
              </template>
            </el-table-column>
            <template v-if="taskForm.allModifyFields && taskForm.allModifyFields.length > 0">
              <el-table-column v-for="(item,index) in taskForm.allModifyFields" :label="item.prefix + item.fieldLabel"
                v-if="item.fieldIsShow" :key="item.fieldId"
                :align="item.fieldId === 35 ||item.fieldId === 40 || item.fieldId === 41 || item.fieldId === 42 || item.fieldId === 43? 'left':'center'"
                :min-width="item.fieldId === 35 ||item.fieldId === 40 || item.fieldId === 41?'350px':'280px'">
                <template slot-scope="scope">
                  <template v-if="item.fieldId === 1">
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.title}}</span>
                    </div>
                    <div v-else>
                      <el-input type="text" class="table-input" :placeholder="'请输入'+item.fieldLabel"
                        v-model="scope.row.title" maxlength="100" show-word-limit
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)" />
                    </div>
                  </template>
                  <template v-if="item.fieldId === 2">
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.goodsCode}}</span>
                    </div>
                    <div v-else>
                      <el-input type="text" class="table-input" :placeholder="'请输入'+item.fieldLabel"
                        v-model="scope.row.goodsCode" maxlength="100" show-word-limit
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)" />
                    </div>
                  </template>
                  <template v-if="item.fieldId === 3">
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.posterTitle}}</span>
                    </div>
                    <div v-else>
                      <el-input type="text" class="table-input" :placeholder="'请输入'+item.fieldLabel"
                        v-model="scope.row.posterTitle" maxlength="100" show-word-limit
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)" />
                    </div>
                  </template>
                  <template v-if="item.fieldId === 4">
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.posterRecommend}}</span>
                    </div>
                    <div v-else>
                      <el-input type="text" class="table-input" :placeholder="'请输入'+item.fieldLabel"
                        v-model="scope.row.posterRecommend" maxlength="100" show-word-limit
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)" />
                    </div>
                  </template>
                  <template v-if="item.fieldId === 5">
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.sellPoint}}</span>
                    </div>
                    <div v-else>
                      <el-input type="textarea" class="table-input" :placeholder="'请输入'+item.fieldLabel"
                        v-model="scope.row.sellPoint" maxlength="100" show-word-limit
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)" />
                    </div>
                  </template>
                  <template v-if="item.fieldId === 6">
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.shareCopy}}</span>
                    </div>
                    <div v-else>
                      <el-input type="textarea" class="table-input" :placeholder="'请输入'+item.fieldLabel"
                        v-model="scope.row.shareCopy" maxlength="50" show-word-limit
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)" />
                    </div>
                  </template>
                  <template v-if="item.fieldId === 7">
                    <el-select class="select-class table-input" v-model="scope.row.brandId"
                      @change="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)"
                      :disabled="taskForm.status !== 1">
                      <el-option label="全部" value="">
                      </el-option>
                      <el-option v-for="item in listBrands" :key="item.brandId" :label="item.brandName"
                        :value="item.brandId">
                      </el-option>
                    </el-select>
                  </template>
                  <template v-if="item.fieldId === 8">
                    <!-- 商品分类设置 -->
                    <el-cascader v-model="scope.row.goodscategoryIds"
                      @change="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)"
                      placeholder="选择商品分类" :options="categoryData" class="default-input"
                      :props="{ checkStrictly: true }" change-on-select filterable :disabled="taskForm.status !== 1">
                    </el-cascader>
                  </template>
                  <template v-if="item.fieldId === 10">
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.unrealSalesNum}}</span>
                    </div>
                    <div v-else>
                      <el-input type="text" class="table-input" :placeholder="'请输入'+item.fieldLabel"
                        v-model="scope.row.unrealSalesNum"
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)" />
                    </div>
                  </template>
                  <template v-if="item.fieldId === 11">
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.virtualPutawayNum}}</span>
                    </div>
                    <div v-else>
                      <el-input type="text" class="table-input" :placeholder="'请输入'+item.fieldLabel"
                        v-model="scope.row.virtualPutawayNum"
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)" />
                    </div>
                  </template>
                  <template v-if="item.fieldId === 14">
                    <el-select class="select-class table-input" v-model="scope.row.goodsStatus"
                      @change="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)"
                      :disabled="taskForm.status !== 1">
                      <el-option label="上架" :value="1"></el-option>
                      <el-option label="下架" :value="0"></el-option>
                    </el-select>
                  </template>
                  <template v-if="item.fieldId === 15">
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.weight}}</span>
                    </div>
                    <div v-else>
                      <el-input v-model="scope.row.weight" class="table-input" :placeholder="'请输入'+item.fieldLabel"
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                        <template slot="append">Kg</template>
                      </el-input>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 16">
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.size}}</span>
                    </div>
                    <div v-else>
                      <el-input v-model="scope.row.size" class="table-input" :placeholder="'请输入'+item.fieldLabel"
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                        <template slot="append">m³</template>
                      </el-input>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 17">
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.prov}} {{scope.row.city}}</span>
                    </div>
                    <div v-else>
                      <el-input style="width: 120px;" v-model="scope.row.prov" placeholder="省份"
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,'省份')" />
                      <el-input style="width: 120px;" v-model="scope.row.city" placeholder="城市"
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,'城市')" />
                    </div>
                  </template>
                  <template v-if="item.fieldId === 18">
                    <div v-if="taskForm.status !== 1">
                      <span v-if="scope.row.originStock" class="mar-r-10">{{scope.row.originStock}}</span>
                      <span v-else class="mar-r-10">0</span>
                      <span>{{scope.row.opeartStockMethod === 1?'加':'减'}}</span> <span>{{scope.row.stock}}</span>
                    </div>
                    <div v-else>
                      <span v-if="scope.row.originStock" class="mar-r-10">{{scope.row.originStock}}</span>
                      <span v-else class="mar-r-10">0</span>
                      <el-radio-group v-model="scope.row.opeartStockMethod"
                        @change="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                        <el-radio :label="1">加</el-radio>
                        <el-radio :label="2">减</el-radio>
                      </el-radio-group>
                      <div>
                        <el-input style="width: 120px;" v-model="scope.row.stock" :placeholder="'请输入'+item.fieldLabel"
                          @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)" />
                      </div>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 19">
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.stockWarn}}</span>
                    </div>
                    <div v-else>
                      <el-input v-model="scope.row.stockWarn" class="table-input" :placeholder="'请输入'+item.fieldLabel"
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                      </el-input>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 20">
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.goodsBarCode}}</span>
                    </div>
                    <div v-else>
                      <el-input type="text" class="table-input" :placeholder="'请输入'+item.fieldLabel"
                        v-model="scope.row.goodsBarCode" maxlength="100"
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)" />
                    </div>
                  </template>
                  <template v-if="item.fieldId === 21">
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.externalCode}}</span>
                    </div>
                    <div v-else>
                      <el-input type="text" class="table-input" :placeholder="'请输入'+item.fieldLabel"
                        v-model="scope.row.externalCode" maxlength="100"
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)" />
                    </div>
                  </template>
                  <template v-if="item.fieldId === 22">
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.specimenLimitNum}}</span>
                    </div>
                    <div v-else>
                      <el-input type="text" class="table-input" :placeholder="'请输入'+item.fieldLabel"
                        v-model="scope.row.specimenLimitNum" maxlength="100"
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)" />
                    </div>
                  </template>
                  <template v-if="item.fieldId === 23">
                    <div>
                      <div style="align-items: center;">
                        <span v-if="scope.row.isGoodsLimit == 0">不限购</span>
                        <span v-else-if="scope.row.isGoodsLimit == 1 && scope.row.limitType == '1'">单笔限购</span>
                        <span v-else>每人限购</span>
                        <el-popover width="650" label-width="170px" trigger="click" placement="top"
                          v-model="scope.row.limitForm.limitCheckedLable" v-if="taskForm.status === 1">
                          <el-button slot="reference" icon="el-icon-edit" style="border: none !important;" type="text"
                            @click="scope.row.limitForm.limitCheckedLable = !scope.row.limitForm.limitCheckedLable">
                          </el-button>
                          <div>
                            <el-checkbox v-model="scope.row.limitForm.isGoodsLimit"
                              :checked="scope.row.limitForm.isGoodsLimit === true || scope.row.limitForm.isGoodsLimit === 1">
                              限制每人可购买数量</el-checkbox>
                          </div>
                          <div v-if="scope.row.limitForm.isGoodsLimit">
                            <div>
                              <el-radio v-model="scope.row.limitForm.limitType" :label="1">单笔限购</el-radio>
                              <div style="background:#F2F2F6;width:600px" class="pad-10 mar-l-24">
                                <div>
                                  <span>每笔订单限购</span>
                                  <el-input type="text" class="width-100 mar-l-10 mar-r-10" maxlength="10"
                                    v-model="scope.row.limitForm.singleLimitNum"
                                    @keyup.native="scope.row.limitForm.singleLimitNum = checkInputNum(scope.row.limitForm.singleLimitNum)">
                                  </el-input>
                                  <span>件</span>
                                </div>
                                <span>在云店小程序限制顾客购买该商品的每笔订单数量，填空或填0则为不限数量</span>
                              </div>
                            </div>
                            <div>
                              <el-radio v-model="scope.row.limitForm.limitType" :label="2">每人限购</el-radio>
                              <div style="background:#F2F2F6;width:600px" class="pad-10 mar-l-24">
                                <div>
                                  <el-select v-model="scope.row.limitForm.personLimitType"
                                    class="width-150 mar-l-10 mar-r-10" placeholder="请选择">
                                    <el-option v-for="item in personLimitList" :key="item.value" :label="item.label"
                                      :value="item.value">
                                    </el-option>
                                  </el-select>
                                  <span>限购</span>
                                  <el-input type="text" class="width-100 mar-l-10 mar-r-10" maxlength="10"
                                    v-model="scope.row.limitForm.personLimitNum"
                                    @keyup.native="scope.row.limitForm.personLimitNum = checkInputNum(scope.row.limitForm.personLimitNum)">
                                  </el-input>
                                  <span>件</span>
                                  <el-tooltip class="item" effect="light" placement="right">
                                    <div slot="content">
                                      限购周期说明:<br />
                                      终身限购时限为商品存在的整个时段;<br />
                                      每年限购周期为每年第一天的00:00:00至每年最后一天的23:59:59<br />
                                      每月限购周期为每月第一天的00:00:00至每月最后一天的23:59:59<br />
                                      每周限购周期为周一00:00:00至周天23:59:59<br />
                                      每天限购周期为当天00:00:00至当天23:59:59
                                    </div>
                                    <i class="el-icon-question"></i>
                                  </el-tooltip>
                                </div>
                                <span>限购周期以自然周期计算,如每周从周一到周日计算,其他周期同理;变更限购周期后,系统将重新累计用户已购数</span>
                              </div>
                            </div>
                          </div>
                          <div style="min-height: 210px;" v-else></div>
                          <div class="mar-t-10 flex-center">
                            <el-button @click="limitCancel(scope.row)">取消</el-button>
                            <el-button type="primary"
                              @click="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)">确定
                            </el-button>
                          </div>
                        </el-popover>
                      </div>
                    </div>
                    <div v-if="scope.row.isGoodsLimit == 1">
                      <div v-if="scope.row.limitType == 2">
                        <span v-if="scope.row.personLimitType == 1">每天限购{{scope.row.singleLimitNum}}件</span>
                        <span v-if="scope.row.personLimitType == 2">每周限购{{scope.row.singleLimitNum}}件</span>
                        <span v-if="scope.row.personLimitType == 3">每月限购{{scope.row.singleLimitNum}}件</span>
                        <span v-if="scope.row.personLimitType == 4">每年限购{{scope.row.singleLimitNum}}件</span>
                        <span v-if="scope.row.personLimitType == 5">终身限购{{scope.row.singleLimitNum}}件</span>
                      </div>
                      <div v-else>
                        <span>{{scope.row.singleLimitNum}}件</span>
                      </div>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 24">
                    <span v-if="scope.row.originSupplyPrice" class="mar-r-10">{{scope.row.originSupplyPrice}}</span>
                    <span v-else class="mar-r-10">0.00</span>
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.supplyPrice}}</span>
                    </div>
                    <div v-else>
                      <el-input class="short-input width-per-60" :placeholder="'请输入'+item.fieldLabel"
                        v-model="scope.row.supplyPrice" maxlength="10"
                        @keyup.native=" scope.row.supplyPrice = checkInputNum(scope.row.supplyPrice)"
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)" />
                    </div>
                  </template>
                  <template v-if="item.fieldId === 25">
                    <el-select v-model="scope.row.supplierTaxFlag"
                      @change="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)"
                      :disabled="taskForm.status !== 1">
                      <el-option label="已含税" :value="1"></el-option>
                      <el-option label="未含税" :value="0"></el-option>
                    </el-select>
                  </template>
                  <template v-if="item.fieldId === 26">
                    <el-select v-model="scope.row.taxItemsId"
                      @change="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)"
                      :disabled="taskForm.status !== 1">
                      <el-option label="无" value=""></el-option>
                      <el-option v-for="item in taxList" :key="item.taxItemsId"
                        :label="item.taxName + '(' + item.taxRate + '%)'" :value="item.taxItemsId"></el-option>
                    </el-select>
                  </template>
                  <template v-if="item.fieldId === 27">
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.supplierPostFee}}</span>
                    </div>
                    <div v-else>
                      <el-input v-model="scope.row.supplierPostFee" class="short-input width-per-60" min="0"
                        @keyup.native=" scope.row.supplierPostFee = checkInputNum(scope.row.supplierPostFee)"
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                        <template slot="append">元</template>
                      </el-input>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 28">
                    <span v-if="scope.row.originSellPrice" class="mar-r-10">{{scope.row.originSellPrice}}</span>
                    <span v-else class="mar-r-10">0.00</span>
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.sellPrice}}</span>
                    </div>
                    <div v-else>
                      <el-input class="short-input width-per-60" :placeholder="'请输入'+item.fieldLabel"
                        v-model="scope.row.sellPrice" maxlength="10"
                        @keyup.native=" scope.row.sellPrice = checkInputNum(scope.row.sellPrice)"
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                        <template slot="append">元</template>
                      </el-input>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 29">
                    <span v-if="scope.row.originMemberPrice" class="mar-r-10">{{scope.row.originMemberPrice}}</span>
                    <span v-else class="mar-r-10">0.00</span>
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.memberPrice}}</span>
                    </div>
                    <div v-else>
                      <el-input class="short-input width-per-60" :placeholder="'请输入'+item.fieldLabel"
                        v-model="scope.row.memberPrice" maxlength="10"
                        @keyup.native=" scope.row.memberPrice = checkInputNum(scope.row.memberPrice)"
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                        <template slot="append">元</template>
                      </el-input>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 30">
                    <span v-if="scope.row.originSpecimenPrice" class="mar-r-10">{{scope.row.originSpecimenPrice}}</span>
                    <span v-else class="mar-r-10">0.00</span>
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.specimenPrice}}</span>
                    </div>
                    <div v-else>
                      <el-input class="short-input width-per-60" :placeholder="'请输入'+item.fieldLabel"
                        v-model="scope.row.specimenPrice" maxlength="10"
                        @keyup.native=" scope.row.specimenPrice = checkInputNum(scope.row.specimenPrice)"
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                        <template slot="append">元</template>
                      </el-input>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 31">
                    <span v-if="scope.row.originScribingPrice" class="mar-r-10">{{scope.row.originScribingPrice}}</span>
                    <span v-else class="mar-r-10">0.00</span>
                    <div v-if="taskForm.status !== 1">
                      <span>{{scope.row.scribingPrice}}</span>
                    </div>
                    <div v-else>
                      <el-input class="short-input width-per-60" :placeholder="'请输入'+item.fieldLabel"
                        v-model="scope.row.scribingPrice" maxlength="10"
                        @keyup.native=" scope.row.scribingPrice = checkInputNum(scope.row.scribingPrice)"
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                        <template slot="append">元</template>
                      </el-input>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 32">
                    <div class="mar-b-10">
                      <el-radio v-model="scope.row.postFeeType" :label="10" style="margin-right:0px;"
                        @change="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)"
                        :disabled="taskForm.status !== 1">统一运费</el-radio>
                      <el-input v-model="scope.row.postFee" class="width-per-60" min="0"
                        :disabled="taskForm.status !== 1" v-if="scope.row.postFeeType === 10"
                        :placeholder="'请输入'+item.fieldLabel"
                        @keyup.native=" scope.row.postFee = checkInputNum(scope.row.postFee)"
                        @blur="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                        <template slot="append">元</template>
                      </el-input>
                    </div>
                    <div class="mar-b-10">
                      <el-radio v-model="scope.row.postFeeType" :label="11" style="margin-right:0px;"
                        @change="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)"
                        :disabled="taskForm.status !== 1">货号运费模板</el-radio>
                      <el-radio v-model="scope.row.postFeeType" :label="12" style="margin-right:0px;"
                        @change="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)"
                        :disabled="taskForm.status !== 1">SKU运费模板
                      </el-radio>
                      <el-select v-model="scope.row.deliveryTemplateId" placeholder="请选择" class="width-per-50"
                        v-if="scope.row.postFeeType === 11 ||scope.row.postFeeType === 12"
                        @change="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)"
                        :disabled="taskForm.status !== 1">
                        <el-option v-for="(item, index) in deliveryTemplates" :key="index" :label="item.templateName"
                          :value="item.templateId"></el-option>
                      </el-select>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 35">
                    <!-- 商品图片 多图-->
                    <div class="more-pic-bar">
                      <draggable id="content-box flex-item" v-model="scope.row.goodsPicList" dragable="true"
                        :move="getdata" @update="datadragEnd(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                        <div class="upload-remove-bar position-r" v-for="(url,index) in scope.row.goodsPicList"
                          :key="index">
                          <!--   <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info"
                            icon-color="red" title="这是一段内容确定删除吗？"> -->
                          <img v-if="url" class="user-avatar cursor-p" :src="url+ '?imageView2/1/w/200/h/200/q/100'"
                            @click="selectPicEls" />
                          <!-- </el-popconfirm> -->
                          <div class="close-icon width-36 height-36 flex-center cursor-p" v-if="taskForm.status === 1"
                            @click="closeEls(scope.row,scope.$index,item.fieldId,item.fieldLabel,index)">
                            <svg-icon v-if="url" icon-class="close" class="icon font-16" />
                          </div>
                        </div>
                      </draggable>
                      <div class="el-upload-box cursor-p"
                        @click="handleOpenMaterial(scope.row,scope.$index,item.fieldId,item.fieldLabel)"
                        v-if="scope.row.goodsPicList && scope.row.goodsPicList.length < 5 && taskForm.status === 1">
                        <i class="el-icon-plus"></i>
                      </div>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 36">
                    <!-- 单列大图 单图-->
                    <div class="flex flex-center">
                      <div class="upload-remove-bar position-r">
                        <!-- <el-popconfirm confirm-button-text='替换' cancel-button-text='查看大图' icon="el-icon-info"
                          icon-color="red" title=""> -->
                        <img v-if="scope.row.picName" class="user-avatar cursor-p"
                          :src="scope.row.picName+ '?imageView2/1/w/200/h/200/q/100'" @click="selectPicEls">
                        <!-- </el-popconfirm> -->
                        <div class="close-icon width-36 height-36 flex-center cursor-p"
                          @click="closeEls(scope.row,scope.$index,item.fieldId,item.fieldLabel,0)"
                          v-if="taskForm.status === 1">
                          <svg-icon v-if="scope.row.picName" icon-class="close" class="icon font-16" />
                        </div>
                        <div v-if="!scope.row.picName && taskForm.status === 1" class="el-upload-box cursor-p"
                          @click="handleOpenMaterial(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                          <i class="el-icon-plus"></i>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 37">
                    <!-- 分享图片 -->
                    <div class="flex flex-center">
                      <div class="upload-remove-bar position-r">
                        <!-- <el-popconfirm confirm-button-text='替换' cancel-button-text='查看大图' icon="el-icon-info"
                          icon-color="red" title=""> -->
                        <img v-if="scope.row.shareImageName" class="user-avatar cursor-p"
                          :src="scope.row.shareImageName+ '?imageView2/1/w/200/h/200/q/100'" @click="selectPicEls">
                        <!-- </el-popconfirm> -->
                        <div class="close-icon width-36 height-36 flex-center cursor-p" v-if="taskForm.status === 1"
                          @click="closeEls(scope.row,scope.$index,item.fieldId,item.fieldLabel,0)">
                          <svg-icon v-if="scope.row.shareImageName" icon-class="close" class="icon font-16" />
                        </div>
                        <div v-if="!scope.row.shareImageName && taskForm.status === 1" class="el-upload-box cursor-p"
                          @click="handleOpenMaterial(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                          <i class="el-icon-plus"></i>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 38">
                    <!-- 商品海报 -->
                    <div class="flex flex-center">
                      <div class="upload-remove-bar position-r">
                        <!-- <el-popconfirm confirm-button-text='替换' cancel-button-text='查看大图' icon="el-icon-info"
                          icon-color="red" title=""> -->
                        <img v-if="scope.row.posterImageName" class="user-avatar cursor-p"
                          :src="scope.row.posterImageName+ '?imageView2/1/w/200/h/200/q/100'" @click="selectPicEls">
                        <!-- </el-popconfirm> -->
                        <div class="close-icon width-36 height-36 flex-center cursor-p" v-if="taskForm.status === 1"
                          @click="closeEls(scope.row,scope.$index,item.fieldId,item.fieldLabel,0)">
                          <svg-icon v-if="scope.row.posterImageName" icon-class="close" class="icon font-16" />
                        </div>
                        <div v-if="!scope.row.posterImageName && taskForm.status === 1" class="el-upload-box cursor-p"
                          @click="handleOpenMaterial(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                          <i class="el-icon-plus"></i>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 39">
                    <!-- sku图片 -->
                    <div class="flex flex-center">
                      <div class="upload-remove-bar position-r">
                        <!-- <el-popconfirm confirm-button-text='替换' cancel-button-text='查看大图' icon="el-icon-info"
                          icon-color="red" title=""> -->
                        <img v-if="scope.row.skuPicUrl" class="user-avatar cursor-p"
                          :src="scope.row.skuPicUrl+ '?imageView2/1/w/200/h/200/q/100'" @click="selectPicEls">
                        <!-- </el-popconfirm> -->
                        <div class="close-icon width-36 height-36 flex-center cursor-p" v-if="taskForm.status === 1"
                          @click="closeEls(scope.row,scope.$index,item.fieldId,item.fieldLabel,0)">
                          <svg-icon v-if="scope.row.skuPicUrl" icon-class="close" class="icon font-16" />
                        </div>
                        <div v-if="!scope.row.skuPicUrl && taskForm.status === 1" class="el-upload-box cursor-p"
                          @click="handleOpenMaterial(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                          <i class="el-icon-plus"></i>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 40">
                    <!-- 商品详情 -->
                    <div class="more-pic-bar">
                      <draggable id="content-box flex-item" v-model="scope.row.detailPicList" dragable="true"
                        :move="getdata" @update="datadragEnd(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                        <div class="upload-remove-bar position-r" v-for="(url,index) in scope.row.detailPicList"
                          :key="index">
                          <img v-if="url" class="user-avatar cursor-p" :src="url+ '?imageView2/1/w/200/h/200/q/100'"
                            @click="selectPicEls">
                          <div class="close-icon width-36 height-36 flex-center cursor-p" v-if="taskForm.status === 1"
                            @click="closeEls(scope.row,scope.$index,item.fieldId,item.fieldLabel,index)">
                            <svg-icon v-if="url" icon-class="close" class="icon font-16" />
                          </div>
                        </div>
                      </draggable>
                      <div class="el-upload-box cursor-p" v-if="taskForm.status === 1"
                        @click="handleOpenMaterial(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                        <i class="el-icon-plus"></i>
                      </div>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 41">
                    <!-- 助播素材 -->
                    <div class="more-pic-bar">
                      <draggable id="content-box flex-item" v-model="scope.row.anchorPicList" dragable="true"
                        :move="getdata" @update="datadragEnd(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                        <div class="upload-remove-bar position-r" v-for="(url,index) in scope.row.anchorPicList"
                          :key="index">
                          <img v-if="url" class="user-avatar cursor-p" :src="url+ '?imageView2/1/w/200/h/200/q/100'"
                            @click="selectPicEls">
                          <div class="close-icon width-36 height-36 flex-center cursor-p" v-if="taskForm.status === 1"
                            @click="closeEls(scope.row,scope.$index,item.fieldId,item.fieldLabel,index)">
                            <svg-icon v-if="url" icon-class="close" class="icon font-16" />
                          </div>
                        </div>
                      </draggable>
                      <div class="el-upload-box cursor-p" v-if="taskForm.status === 1"
                        @click="handleOpenMaterial(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                        <i class="el-icon-plus"></i>
                      </div>
                    </div>
                  </template>
                  <template v-if="item.fieldId === 42">
                    <div v-if="scope.row.orginWarehouseList && scope.row.orginWarehouseList.length > 0">
                      <div v-for="item in scope.row.orginWarehouseList">
                        [{{item.warehouseTypeName}}]{{item.warehouseName}}</div>
                    </div>
                    <div v-else>无</div>
                  </template>
                  <template v-if="item.fieldId === 43">
                    <el-select v-model="scope.row.warehouseIds" placeholder="请选择仓库" :multiple="true"
                      :collapse-tags="false" :disabled="taskForm.status  !== 1"
                      @remove-tag="handleRemoveTagWarehouse(scope.row,scope.$index,item.fieldId,item.fieldLabel)"
                      @visible-change="saveGoodsRecord(scope.row,scope.$index,item.fieldId,item.fieldLabel)">
                      <el-option v-for="item in warehouseDataList" :key="item.warehouseId" :label="item.warehouseName"
                        :value="item.warehouseId">
                      </el-option>
                    </el-select>
                  </template>
                </template>
              </el-table-column>
            </template>
            <el-table-column min-width="180px" label="结果说明" align="right" fixed="right"
              v-if="taskForm.status === 3 || taskForm.status === 4">
              <template slot-scope="scope">
                <div v-if="taskForm.status === 3">
                  作废
                </div>
                <div v-else>
                  <label v-if="scope.row.status == 0">待修改</label>
                  <label v-else>
                    生成{{scope.row.status === 1 ? '失败':'成功'}}
                    <el-tooltip v-if="scope.row.statusRemark" class="item" effect="dark"
                      :content="scope.row.statusRemark" placement="top-end">
                      <el-link type="primary" :underline="false">原因</el-link>
                    </el-tooltip>
                  </label>
                </div>
                <div v-if="scope.row.updateTime">{{scope.row.updateTime}}</div>
              </template>
            </el-table-column>
            <el-table-column width="140px" label="操作" align="right" fixed="right" v-if="taskForm.status === 1">
              <template slot-scope="scope">
                <el-button type="text" size="medium" @click="handleDeleteGoodsRecord(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 列表分页 -->
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.currentPage" :limit.sync="queryParams.size"
          @pagination="getTaskGoodsList" />
      </div>
    </el-card>

    <div class="bottom-bar">
      <el-button @click="back()">返回</el-button>
      <el-button class="mar-l-30" type="primary" @click="saveBatchModifyGoods(2)" v-if="taskForm.status === 1">立即发布
      </el-button>
      <el-button class="mar-l-30" type="primary" @click="saveBatchModifyGoods(1)" v-if="taskForm.status === 1">保存草稿
      </el-button>
      <el-button class="mar-l-30" type="primary" @click="handleExportGoodsRecord(-1)"
        v-if="(taskForm.status === 3 || taskForm.status === 4) && total > 0">导出全部商品</el-button>
      <el-button class="mar-l-30" type="primary" @click="handleExportGoodsRecord(2)"
        v-if="taskForm.status === 4 && taskForm.totalSuccessNumber > 0">导出成功商品
      </el-button>
      <el-button class="mar-l-30" type="primary" @click="handleExportGoodsRecord(1)"
        v-if="taskForm.status === 4 && taskForm.totalFailNumber > 0">导出失败商品
      </el-button>
      <el-button @click="handleReportCenter" v-if="isShowJumpReportConter">跳转到报表中心</el-button>
    </div>
    <GoodsListSelect :selectGoodsVisible="selectGoodsVisible" v-if="selectGoodsVisible"
      :hasSelectGoodsAndSku="hasSelectGoodsAndSku" :isAssociateSkuSearch="isAssociateSkuSearch" :skuFlag="skuFlag"
      :onConfirm="onConfirm" :onCancel="onCancel">
    </GoodsListSelect>
    <MaterialSelect :dialogVisible="materialDialogVisible" :isMultiple="materialIsMultiple"
      :onConfirm="materialOnConfirm" :onCancel="materailOnCancel" :multipleRemainNum="materialMultipleRemainNum">
    </MaterialSelect>

    <!-- 批量导入商品弹出 -->
    <el-dialog width="700px" title="批量导入商品" :visible.sync="dialogBatchImportGoodsVisible">
      <el-form ref="batchImportGoodsFormRef" :model="batchImportGoodsForm" :rules="batchImportGoodsRules"
        label-position="right" label-width="100px" style='width: 500px; margin-left:50px;'>
        <el-form-item label="文件：" prop="fileName">
          <el-upload v-if="!batchImportGoodsForm.fileName" class="upload-demo" drag
            v-loading="batchImportGoodsFileLoading" action="/api/common/uploadFiles" accept=".xlsx,.xls"
            :before-upload="beforeFileUpload" name="files" :data="token" :on-success="handleUploadFileUrlSuccess">
            <div>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <!-- <div class="el-upload__tip" slot="tip">只能上传xlsx/xls文件且不超过2M</div> -->
            </div>
          </el-upload>
          <div v-if="batchImportGoodsForm.fileName">
            <span>{{batchImportGoodsForm.fileName}}</span>
            <span style="font-size: 14px;margin-left: 20px;color: #409eff;cursor: pointer;"
              @click="handleDeleteBatchImportGoodsFile">删除</span>
          </div>
          <div>
            <div class="el-upload__text">仅支持xlsx, xls格式文件，文件大小请控制在 1MB 以内。</div>
            <div class="el-upload__text">如无模板 <el-button type="text" @click="downImportTemplate" class="mar-l-10">
                下载批量修改模板</el-button>
            </div>

          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelBatchImportGoods">取消</el-button>
        <el-button type="primary" @click="saveBatchImportGoods">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    saveProjectGoodsBatchModifyTask,
    getProjectGoodsBatchModifyTaskDetail,
    exportModifyTaskRecord
  } from '@/api/goods/batchModifyGoodsTask'

  import {
    paging,
    deleteProjectGoodsBatchModifyTaskRecord,
    getGoodsIdListByTaskId,
    saveBatchProjectGoodsBatchModifyTaskRecord,
    saveProjectGoodsBatchModifyTaskRecord,
    deleteByTaskId,
    importGoodsForBatchModify
  } from '@/api/goods/batchModifyGoodsTaskRecord'

  import GoodsListSelect from '@/components/Goods/GoodsListSelect/index'

  import {
    listWarehouseInfo
  } from '@/api/warehouse/warehouseInfo'

  import {
    listBrand
  } from '@/api/user/enterpriseBrand'

  import {
    listGoodsCategory
  } from '@/api/goods/goods'

  import {
    getTaxList
  } from '@/api/warehouse/warehouseTaxItems'

  import {
    listTemplate
  } from '@/api/sell/delivery-template.js'

  import MaterialSelect from '@/components/MaterialSelect/index'
  import {
    getToken
  } from '@/utils/auth'
  import {
    jumpToReportCenter,
    downloadFile
  } from '@/api/common/common'

  import draggable from 'vuedraggable'
  export default {
    components: {
      GoodsListSelect,
      MaterialSelect,
      draggable
    },
    directives: {},
    data() {
      return {
        isAssociateSkuSearch: 0,
        selectGoodsVisible: false,
        skuFlag: null,
        hasSelectGoodsAndSku: [],
        taskId: '',
        modifyType: '',
        taskRecordList: [],
        total: 0,
        listLoading: false,
        loadingText: '加载中',
        // 表头数据
        tableHead: [],
        queryParams: {
          enterpriseId: this.getEnterpriseId(),
          supplierId: this.getSupplierId(),
          memberId: this.getMemberId(),
          currentPage: 1,
          size: 20,
          status: '-1'
        },
        // 仓库列表
        warehouseDataList: [],
        // 品牌列表
        listBrands: [],
        // 商品的所有分类json
        categoryData: [],
        // 进项税税目
        taxList: [],
        // 运费模板
        deliveryTemplates: [],
        // 已选的字段
        modifyFieldsArray: [],
        // 任务详情实体
        taskForm: {
          taskId: undefined,
          modifyFields: 42,
          allModifyFields: []
        },
        personLimitList: [{
          value: 5,
          label: '终身'
        }, {
          value: 1,
          label: '每天'
        }, {
          value: 2,
          label: '每周'
        }, {
          value: 3,
          label: '每月'
        }, {
          value: 4,
          label: '每年'
        }],
        materialDialogVisible: false,
        materialIsMultiple: false,
        // 多选剩余可选数量
        materialMultipleRemainNum: -1,
        currentOpeartPicObj: {
          item: undefined,
          index: undefined,
          fieldId: undefined,
          fieldLabel: undefined
        },
        emptyText: '暂无数据',
        isShowJumpReportConter: false,
        // 规格类型：1-多规格，0-单规格，默认：0单规格
        modifyTypeSkuFlag: 0,
        // 当前修改字段集合，配合规格类型使用
        currentModifyFieldsArray: [],
        dialogBatchImportGoodsVisible: false,
        batchImportGoodsFileLoading: false,
        batchImportGoodsForm: {
          fileUrl: '',
          fileName: '',
          enterpriseId: this.getEnterpriseId(),
          supplierId: this.getSupplierId(),
          memberId: this.getMemberId()
        },
        batchImportGoodsRules: {
          'fileName': [{
            required: true,
            message: '请上传导入文件',
            trigger: 'change'
          }]
        }
      }
    },
    watch: {
      'taskForm.modifyFields': {
        handler: function() {
          this.getTableHead(true)
        }
      },
      'modifyFieldsArray': {
        handler: function() {
          this.getTableHead(true)
        }
      }
    },
    // 初始化页面
    created() {
      this.token = {
        accessToken: getToken()
      }
      // modifyType:1-修改信息和状态，2-修改价格/库存/规格信息和编码，3-修改图片/详情图 4-修改授权仓库
      const params = this.getCurrentPage().query
      this.taskId = params.taskId
      if (this.taskId === 0) {
        this.emptyText = '暂无商品，单笔单据最多支持 2000 条'
      }
      this.modifyType = params.modifyType + ''
      if (this.modifyType === '1') {
        // 不是供应商和门店端，才需要去获取品牌，分类等信息
        if (!this.queryParams.supplierId && !this.queryParams.memberId) {
          this.getBrand()
          this.getGoodsCategory()
          this.getTaxList()
        }
      }
      if (this.modifyType === '2') {
        this.isAssociateSkuSearch = 1
        // 不是供应商和门店端，才需要去获取运费模板
        if (!this.queryParams.supplierId && !this.queryParams.memberId) {
          this.getTemplateList()
        }
      }
      if (this.modifyType === '4') {
        this.getWarehouseList()
      }
      this.getTaskDetail()
    },
    methods: {
      selectPicEls() {
      },
      // 打开素材
      handleOpenMaterial(item, index, fieldId, fieldLabel) {
        this.materialDialogVisible = true
        if (fieldId === 35 || fieldId === 40 || fieldId === 41) {
          this.materialIsMultiple = true
          this.materialMultipleRemainNum = -1
          if (fieldId === 35) {
            this.materialMultipleRemainNum = item.goodsPicList ? 5 - item.goodsPicList.length : 5
          }
        } else {
          this.materialIsMultiple = false
        }
        this.currentOpeartPicObj.item = item
        this.currentOpeartPicObj.index = index
        this.currentOpeartPicObj.fieldId = fieldId
        this.currentOpeartPicObj.fieldLabel = fieldLabel
      },
      closeEls(item, index, fieldId, fieldLabel, imgIndex) {
        if (fieldId === 35) {
          item.goodsPicList.splice(imgIndex, 1) // 删除元素商品图片
        } else if (fieldId === 40) {
          item.detailPicList.splice(imgIndex, 1) // 删除元素商品详情
        } else if (fieldId === 41) {
          item.anchorPicList.splice(imgIndex, 1) // 删除元素助播素材
        } else if (fieldId === 36) {
          item.picName = '' // 删除元素单列大图
        } else if (fieldId === 37) {
          item.shareImageName = '' // 删除元素分享图片
        } else if (fieldId === 38) {
          item.posterImageName = '' // 删除元素商品海报
        } else if (fieldId === 39) {
          item.skuPicUrl = '' // 删除元素sku图片
        } else {
          return
        }
        this.saveGoodsRecord(item, index, fieldId, fieldLabel)
      },
      // 获取任务详情
      getTaskDetail() {
        getProjectGoodsBatchModifyTaskDetail(this.getEnterpriseId(), this.getSupplierId(), this.getMemberId(), this
          .taskId, this.modifyType).then(response => {
          if (response.isError) return
          this.taskForm = response.data
          if (this.taskForm.modifyType === 4) {
            if (this.taskForm && this.taskForm.modifyFields) {
              this.taskForm.modifyFields = parseInt(this.taskForm.modifyFields)
            }
          } else if (this.taskForm.modifyType === 1 || this.taskForm.modifyType === 2 || this.taskForm
            .modifyType === 3) {
            var selectArry = []
            if (this.taskForm && this.taskForm.modifyFields) {
              var strArry = this.taskForm.modifyFields.split(',')
              for (var i = 0; i < strArry.length; i++) {
                selectArry[i] = parseInt(strArry[i])
              }
            }
            this.modifyFieldsArray = selectArry
            if (this.taskForm.modifyType === 3 && this.modifyFieldsArray.length > 0) {
              const isContonSkuPic = this.modifyFieldsArray.some(function(currentValue, index, arr) {
                return currentValue === 39
              })
              if (isContonSkuPic) {
                this.isAssociateSkuSearch = 1
                this.modifyTypeSkuFlag = 1
              }
            }
          }
          if (this.taskForm.status === 1) {
            this.emptyText = '暂无商品，单笔单据最多支持 2000 条'
          }
          this.getTableHead()
          this.getTaskGoodsList()
        })
      },
      getWarehouseList() {
        var query = {
          enterpriseId: this.getEnterpriseId(),
          warehouseSource: this.getSupplierId() ? 2 : 1
        }
        listWarehouseInfo(query).then(response => {
          if (response.isError) return
          this.warehouseDataList = response.data
        })
      },
      getBrand() {
        listBrand(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.listBrands = response.data
        })
      },
      // 获取类目
      getGoodsCategory() {
        listGoodsCategory(this.getEnterpriseId()).then(response => {
          this.categoryData = response.data
        })
      },
      // 获取税目列表
      getTaxList() {
        getTaxList(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.taxList = response.data
        })
      },
      // 获取运费模板列表
      getTemplateList() {
        const templateType = '1'
        listTemplate({
          enterpriseId: this.getEnterpriseId(),
          templateType: templateType
        }).then(response => {
          if (response.isError) return
          this.deliveryTemplates = response.data
        })
      },
      getGoodsIdListByTaskId() {
        getGoodsIdListByTaskId(this.getEnterpriseId(), this.taskForm.taskId).then(response => {
          if (response.isError) return
          this.hasSelectGoodsAndSku = response.data
        })
      },
      getTableHead(isLoad) {
        var that = this
        if (isLoad) {
          that.listLoading = true
        }
        if (that.taskForm && that.taskForm.allModifyFields) {
          var modifyFields = ',' + that.taskForm.modifyFields + ','
          that.taskForm.allModifyFields.forEach((item) => {
            if (that.taskForm.modifyType === 1 || that.taskForm.modifyType === 2 || that.taskForm.modifyType ===
              3) {
              item.fieldIsShow = false
              if (that.modifyFieldsArray && that.modifyFieldsArray.length > 0) {
                item.fieldIsShow = that.modifyFieldsArray.some(function(currentValue, index, arr) {
                  return item.fieldId === currentValue
                })
              }
            } else if (that.taskForm.modifyType === 4) {
              item.fieldIsShow = true
              // 待提交的，如果是删除，就隐藏添加的字段
              if (that.taskForm.status === 1) {
                if (that.taskForm.modifyFields === 43 && that.taskForm.modifyFields === item.fieldId) {
                  item.fieldIsShow = false
                }
              } else {
                if (that.taskForm.modifyFields === 43 && that.taskForm.modifyFields === item.fieldId) {
                  item.prefix = '移除的'
                }
              }
            } else {
              var fieldId = ',' + item.fieldId + ','
              if (modifyFields.indexOf(fieldId) >= 0) {
                item.fieldIsShow = true
              } else {
                item.fieldIsShow = false
              }
            }
          })
        }
        if (isLoad) {
          that.listLoading = false
        }
      },
      handleClick() {
        this.getTaskGoodsList()
      },
      // 获取修改商品任务下的商品列表
      getTaskGoodsList() {
        var that = this
        that.listLoading = true
        that.loadingText = '加载中'
        that.queryParams.taskId = that.taskForm.taskId
        paging(that.queryParams).then(response => {
          that.getGoodsIdListByTaskId()
          if (response.isError) return
          var dataList = response.data.records
          if (dataList && dataList.length > 0) {
            for (var i = 0; i < dataList.length; i++) {
              // 多选的时候，下拉框出现/隐藏时触发	出现则为 true，隐藏则为 false
              dataList[i].visibleChange = false
              if (that.taskForm.modifyType === 1) {
                dataList[i].limitForm = {}
                dataList[i].limitForm.limitCheckedLable = false
                dataList[i].limitForm.isGoodsLimit = dataList[i].isGoodsLimit
                dataList[i].limitForm.limitType = dataList[i].limitType
                dataList[i].limitForm.personLimitNum = dataList[i].singleLimitNum
                dataList[i].limitForm.singleLimitNum = dataList[i].singleLimitNum
                if (dataList[i].isGoodsLimit === 1) {
                  if (dataList[i].limitType === 2) {
                    dataList[i].limitForm.personLimitType = dataList[i].personLimitType
                    dataList[i].limitForm.personLimitNum = dataList[i].singleLimitNum
                    dataList[i].limitForm.singleLimitNum = 0
                  } else { // 单笔限购
                    dataList[i].limitForm.personLimitType = 5
                    dataList[i].limitForm.personLimitNum = 0
                  }
                }
              }
              var arr = [] // 创建一个空数组 零售商品类目
              if (that.$utils.isExist(dataList[i].oneCategoryId)) {
                arr.push(dataList[i].oneCategoryId)
              }
              if (that.$utils.isExist(dataList[i].twoCategoryId)) {
                arr.push(dataList[i].twoCategoryId)
              }
              if (that.$utils.isExist(dataList[i].threeCategoryId)) {
                arr.push(dataList[i].threeCategoryId)
              }
              dataList[i].goodscategoryIds = arr
              if (dataList[i].taxItemsId === '0') {
                dataList[i].taxItemsId = ''
              }
              if (this.taskForm.modifyType === 3) {
                if (!dataList[i].goodsPicList) {
                  dataList[i].goodsPicList = []
                }
                if (!dataList[i].detailPicList) {
                  dataList[i].detailPicList = []
                }
                if (!dataList[i].anchorPicList) {
                  dataList[i].anchorPicList = []
                }
              }
            }
          }
          that.taskRecordList = dataList
          that.total = response.data.total
          that.listLoading = false
        })
      },
      // 删除商品记录
      handleDeleteGoodsRecord(row) {
        this.$confirm('确定要删除商品吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteProjectGoodsBatchModifyTaskRecord(row.recordId).then(response => {
            if (response.isError) return
            this.getTaskGoodsList()
            this.$message({
              message: response.msg,
              type: 'success'
            })
          })
        }).catch(() => {})
      },
      // 返回
      back() {
        var isConfirm = false
        if (this.taskForm.modifyType === 1 || this.taskForm.modifyType === 2 || this.taskForm.modifyType === 3) {
          var strFields = this.modifyFieldsArray.join(',')
          if (this.taskForm.modifyFields !== strFields) {
            isConfirm = true
          }
        } else {
          if (this.taskId === 0) {
            isConfirm = true
          }
        }
        if (isConfirm) {
          this.$confirm('返回后新增或修改的数据将不会保存，确定要返回吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$router.go(-1)
          }).catch(() => {})
        } else {
          this.$router.go(-1)
        }
      },
      selectGoods() {
        this.skuFlag = null
        if (this.taskForm.modifyType === 3) {
          this.isAssociateSkuSearch = this.modifyTypeSkuFlag
          this.skuFlag = this.modifyTypeSkuFlag
        }
        this.selectGoodsVisible = true
      },
      saveBatchModifyGoods(status) {
        if (this.taskForm.modifyType === 1 || this.taskForm.modifyType === 2 || this.taskForm.modifyType === 3) {
          if (!this.modifyFieldsArray || this.modifyFieldsArray.length === 0) {
            this.$message({
              message: '请选择要修改的字段!',
              type: 'error'
            })
            return
          }
          this.taskForm.modifyFields = this.modifyFieldsArray.join(',')
        }
        if (this.total <= 0) {
          this.$message({
            message: '请选择先添加要修改的商品数据!',
            type: 'error'
          })
          return
        }
        this.taskForm.enterpriseId = this.getEnterpriseId()
        this.taskForm.supplierId = this.getSupplierId()
        this.taskForm.memberId = this.getMemberId()
        this.taskForm.status = status
        saveProjectGoodsBatchModifyTask(this.taskForm).then(response => {
          if (response.isError) {
            this.getTaskDetail()
          } else {
            this.$message({
              message: response.msg,
              type: 'success'
            })
            this.$router.go(-1)
          }
        })
      },
      onConfirm(list) {
        var that = this
        that.getGoodsIdListByTaskId()
        if (!that.hasSelectGoodsAndSku) {
          that.hasSelectGoodsAndSku = []
        }
        var saveDataList = []
        list.forEach((item) => {
          var skuId = ''
          if (item.skuId) {
            skuId = item.skuId
          }
          var data = {
            goodsId: item.goodsId,
            skuId: skuId
          }
          that.hasSelectGoodsAndSku.push(data)
          var saveData = {
            enterpriseId: that.getEnterpriseId(),
            supplierId: this.getSupplierId(),
            memberId: this.getMemberId(),
            goodsId: item.goodsId,
            taskId: that.taskForm.taskId,
            skuId: skuId,
            modifyType: that.taskForm.modifyType
          }
          saveDataList.push(saveData)
        })
        saveBatchProjectGoodsBatchModifyTaskRecord(saveDataList).then(response => {
          if (response.isError) return
          this.getTaskGoodsList()
          this.selectGoodsVisible = false
          this.$message({
            message: response.msg,
            type: 'success'
          })
        })
      },
      onCancel() {
        this.selectGoodsVisible = false
      },
      handleRemoveTagWarehouse(item, index, fieldId, fieldLabel) {
        item.visibleChange = true
        this.saveGoodsRecord(item, index, fieldId, fieldLabel)
      },
      // 保存商品记录信息
      saveGoodsRecord(item, index, fieldId, fieldLabel) {
        if (this.taskForm.status !== 1) {
          return
        }
        if (fieldId === 1) {
          // 标题
          // var oldValue = this.taskRecordList[index].title
          var newValue = item.title
          if (!newValue) {
            this.$message({
              message: '请填写' + fieldLabel,
              type: 'error'
            })
            return
          }
        } else if (fieldId === 8) {
          item.oneCategoryId = ''
          item.twoCategoryId = ''
          item.threeCategoryId = ''
          if (item.goodscategoryIds && item.goodscategoryIds.length > 0) {
            if (item.goodscategoryIds.length === 3) {
              item.oneCategoryId = item.goodscategoryIds[0]
              item.twoCategoryId = item.goodscategoryIds[1]
              item.threeCategoryId = item.goodscategoryIds[2]
            } else if (item.goodscategoryIds.length === 2) {
              item.oneCategoryId = item.goodscategoryIds[0]
              item.twoCategoryId = item.goodscategoryIds[1]
            } else if (item.goodscategoryIds.length === 1) {
              item.oneCategoryId = item.goodscategoryIds[0]
            }
          }
        } else if (fieldId === 23) {
          if (item.limitForm.isGoodsLimit) {
            item.isGoodsLimit = 1
            item.limitType = item.limitForm.limitType
            if (item.limitType === 1) {
              item.singleLimitNum = item.limitForm.singleLimitNum
            } else {
              item.singleLimitNum = item.limitForm.personLimitNum
              item.personLimitType = item.limitForm.personLimitType
            }
          } else {
            item.isGoodsLimit = 0
          }
        } else if (fieldId === 35) {
          item.goodsPic = ''
          if (item.goodsPicList && item.goodsPicList.length > 0) {
            item.goodsPic = item.goodsPicList.join(';')
          }
        } else if (fieldId === 40) {
          item.detailPic = ''
          if (item.detailPicList && item.detailPicList.length > 0) {
            item.detailPic = item.detailPicList.join(';')
          }
        } else if (fieldId === 41) {
          item.anchorPic = ''
          if (item.anchorPicList && item.anchorPicList.length > 0) {
            item.anchorPic = item.anchorPicList.join(';')
          }
        } else if (fieldId === 43) {
          // 修改仓库
          item.visibleChange = !item.visibleChange
          if (!item.visibleChange) {
            var hasLen = 0
            var oldLen = 0
            if (item.warehouseId) {
              oldLen = item.warehouseId.split(',').length
            }
            item.warehouseId = ''
            if (item.warehouseIds && item.warehouseIds.length > 0) {
              hasLen = item.warehouseIds.length
              if (hasLen !== oldLen) {
                var wIds = ''
                item.warehouseIds.forEach((w) => {
                  if (wIds.length === 0) {
                    wIds = w + ''
                  } else {
                    wIds = wIds + ',' + w
                  }
                })
                item.warehouseId = wIds
              }
            }
            // 有变化才需要保存
            if (hasLen === oldLen) {
              return
            }
          } else {
            return
          }
        }
        saveProjectGoodsBatchModifyTaskRecord(item).then(response => {
          if (response.isError) return
          if (fieldId === 23) {
            this.limitCancel(item)
          }
        })
      },
      limitCancel(row) {
        row.limitForm.limitCheckedLable = false
      },
      // 素材操作
      materialOnConfirm(list) {
        this.materialDialogVisible = false
        if (list !== undefined && list.length > 0) {
          if (this.currentOpeartPicObj.fieldId === 35) {
            // 商品图片
            var goodsPicList = []
            if (this.taskRecordList[this.currentOpeartPicObj.index].goodsPicList) {
              goodsPicList = this.taskRecordList[this.currentOpeartPicObj.index].goodsPicList
            }
            list.forEach((picItem) => {
              goodsPicList.push(picItem.materialUrl)
            })
            this.taskRecordList[this.currentOpeartPicObj.index].goodsPicList = goodsPicList
          } else if (this.currentOpeartPicObj.fieldId === 40) {
            // 商品详情
            var detailPicList = []
            if (this.taskRecordList[this.currentOpeartPicObj.index].detailPicList) {
              detailPicList = this.taskRecordList[this.currentOpeartPicObj.index].detailPicList
            }
            list.forEach((picItem) => {
              detailPicList.push(picItem.materialUrl)
            })
            this.taskRecordList[this.currentOpeartPicObj.index].detailPicList = detailPicList
          } else if (this.currentOpeartPicObj.fieldId === 41) {
            // 助播素材
            var anchorPicList = []
            if (this.taskRecordList[this.currentOpeartPicObj.index].anchorPicList) {
              anchorPicList = this.taskRecordList[this.currentOpeartPicObj.index].anchorPicList
            }
            list.forEach((picItem) => {
              anchorPicList.push(picItem.materialUrl)
            })
            this.taskRecordList[this.currentOpeartPicObj.index].anchorPicList = anchorPicList
          } else if (this.currentOpeartPicObj.fieldId === 36) {
            // 单列大图
            this.$set(this.taskRecordList[this.currentOpeartPicObj.index], 'picName', list[0].materialUrl)
          } else if (this.currentOpeartPicObj.fieldId === 37) {
            // 分享图片
            this.$set(this.taskRecordList[this.currentOpeartPicObj.index], 'shareImageName', list[0].materialUrl)
          } else if (this.currentOpeartPicObj.fieldId === 38) {
            // 商品海报
            this.$set(this.taskRecordList[this.currentOpeartPicObj.index], 'posterImageName', list[0].materialUrl)
          } else if (this.currentOpeartPicObj.fieldId === 39) {
            // sku图片
            this.$set(this.taskRecordList[this.currentOpeartPicObj.index], 'skuPicUrl', list[0].materialUrl)
          }
        }
        this.saveGoodsRecord(this.taskRecordList[this.currentOpeartPicObj.index], this.currentOpeartPicObj.item.index,
          this.currentOpeartPicObj.fieldId, this.currentOpeartPicObj.fieldLabel)
      },
      materailOnCancel() {
        this.materialDialogVisible = false
      },
      handleCheckIsSelect(isCheck, fieldId) {
        if (fieldId === 39 && this.total > 0) {
          var tips = ''
          if (isCheck) {
            this.modifyFieldsArray.splice(this.modifyFieldsArray.length - 1, 1)
            tips = '选择sku图片，将清除现有的商品记录, 是否继续?'
          } else {
            this.modifyFieldsArray.push(fieldId)
            tips = '取消sku图片，将清除现有的商品记录, 是否继续?'
          }
          this.$confirm(tips, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteByTaskId(this.taskForm.taskId).then(response => {
              if (response.isError) return
              if (!isCheck) {
                this.modifyFieldsArray.splice(this.modifyFieldsArray.length - 1, 1)
              } else {
                this.modifyFieldsArray.push(fieldId)
              }
              this.getTaskGoodsList()
              this.$message({
                message: response.msg,
                type: 'success'
              })
            })
          }).catch(() => {

          })
        }
      },
      // 导出商品记录
      // exportType：导出类型，-1:全部，0:待修改，1:失败，2:成功
      handleExportGoodsRecord(exportType) {
        var tips = ''
        if (exportType === -1) {
          tips = '导出全部'
        } else if (exportType === 0) {
          tips = '导出待修改'
        } else if (exportType === 1) {
          tips = '导出失败'
        } else if (exportType === 2) {
          tips = '导出成功'
        }
        this.$confirm('确定要' + tips + '数据吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          exportModifyTaskRecord(this.taskForm.taskId, exportType).then(response => {
            if (response.isError) return
            this.isShowJumpReportConter = true
            this.$message({
              message: response.msg,
              type: 'success'
            })
          })
        }).catch(() => {

        })
      },
      handleReportCenter() {
        this.isShowJumpReportConter = false
        jumpToReportCenter(this)
      },
      // 选择规格事件
      handleModifyTypeSkuFlag(val) {
        if (this.taskForm.modifyType === 3) {
          if (this.total > 0) {
            var tips = '切换规格类型，将清除现有的商品记录，是否记录？'
            this.modifyTypeSkuFlag = val === 1 ? 0 : 1
            this.$confirm(tips, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              deleteByTaskId(this.taskForm.taskId).then(response => {
                if (response.isError) return
                this.modifyTypeSkuFlag = this.modifyTypeSkuFlag === 1 ? 0 : 1
                this.handleChangeModifyField()
                this.getTaskGoodsList()
                this.$message({
                  message: response.msg,
                  type: 'success'
                })
              })
            }).catch(() => {

            })
          } else {
            this.handleChangeModifyField()
          }
        }
      },
      handleChangeModifyField() {
        if (this.modifyTypeSkuFlag === 1) {
          // 多规格
          this.currentModifyFieldsArray = JSON.parse(JSON.stringify(this.modifyFieldsArray))
          this.modifyFieldsArray = []
          var selectArry = []
          selectArry[0] = parseInt(39)
          this.modifyFieldsArray = selectArry
        } else if (this.modifyTypeSkuFlag === 0) {
          this.modifyFieldsArray = JSON.parse(JSON.stringify(this.currentModifyFieldsArray))
        }
        this.isAssociateSkuSearch = this.modifyTypeSkuFlag
      },
      getdata(evt) {
        // 这里evt.draggedContext后续的内容根据具体的定义变量而定
      },
      datadragEnd(item, index, fieldId, fieldLabel) {
        var isSave = false
        if (fieldId === 35) {
          item.goodsPic = this.taskRecordList[index].goodsPicList.join(';')
          isSave = true
        } else if (fieldId === 40) {
          item.detailPic = this.taskRecordList[index].detailPicList.join(';')
          isSave = true
        } else if (fieldId === 41) {
          item.anchorPic = this.taskRecordList[index].anchorPicList.join(';')
          isSave = true
        }
        if (isSave) {
          this.saveGoodsRecord(item, index, fieldId, fieldLabel)
        }
      },
      // 下载导入模板
      downImportTemplate() {
        var options = {
          enterpriseId: this.getEnterpriseId(),
          supplierId: this.getSupplierId(),
          memberId: this.getMemberId(),
          modifyType: this.taskForm.modifyType,
          modifyFields: this.modifyFieldsArray.join(',')
        }
        var fileName = '批量修改商品'
        if (options.supplierId) {
          fileName = '供应商-' + fileName
        } else if (options.memberId) {
          fileName = '门店-' + fileName
        }
        if (this.taskForm.modifyType === 1) {
          fileName = fileName + '-信息和状态-'
        } else if (this.taskForm.modifyType === 2) {
          fileName = fileName + '-价格和库存和规格信息和编码-'
        } else if (this.taskForm.modifyType === 3) {
          fileName = fileName + '-图片和详情图-'
        } else if (this.taskForm.modifyType === 4) {
          fileName = fileName + '-授权仓库-'
        }

        fileName = fileName + '导入文件.xlsx'
        downloadFile('/goods/projectGoodsBatchModifyTask/downImportGoodsFileTemplate', options, fileName)
      },
      importGoods() {
        this.dialogBatchImportGoodsVisible = true
      },
      beforeFileUpload(file) {
        var fileName = file.name
        if (!fileName) {
          this.$message({
            type: 'error',
            message: '获取不到上传文件名称!'
          })
        }
        var ext = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length)
        const isCanUpload = ext === 'xlsx' || ext === 'xls'
        if (!isCanUpload) {
          this.$message({
            type: 'error',
            message: '上传文件必须是xlsx/xls 格式!'
          })
          return false
        }
        this.batchImportGoodsFileLoading = true

        return (isCanUpload)
      },
      handleUploadFileUrlSuccess(res, file) {
        this.batchImportGoodsFileLoading = false
        if (res.code === 101) {
          const fileUrl = res.data[0]
          this.batchImportGoodsForm.fileName = file.name
          this.batchImportGoodsForm.fileUrl = fileUrl
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      cancelBatchImportGoods() {
        this.dialogBatchImportGoodsVisible = false
        this.batchImportGoodsForm.fileUrl = ''
        this.batchImportGoodsForm.fileName = ''
      },
      // 删除上传文件
      handleDeleteBatchImportGoodsFile() {
        this.batchImportGoodsForm.fileName = ''
        this.batchImportGoodsForm.fileUrl = ''
      },
      saveBatchImportGoods() {
        this.$refs['batchImportGoodsFormRef'].validate((valid) => {
          if (valid) {
            this.dialogBatchImportGoodsVisible = false
            this.listLoading = true
            this.loadingText = '数据正在导入中,请稍等...'
            this.batchImportGoodsForm.modifyType = this.taskForm.modifyType
            this.batchImportGoodsForm.taskId = this.taskForm.taskId
            this.batchImportGoodsForm.modifyFields = this.modifyFieldsArray.join(',')
            importGoodsForBatchModify(this.batchImportGoodsForm).then(response => {
              this.listLoading = false
              this.batchImportGoodsForm.fileName = ''
              this.batchImportGoodsForm.fileUrl = ''
              if (response.isError) {
                return
              }
              this.getTaskGoodsList()
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .store-title-bar {
    .store-staute {
      font-size: 18px;
      font-weight: bold;
      background: #909399;
      padding: 0px 7px 0px 18px;
      height: 36px;
      line-height: 36px !important;
      color: #fff;
      position: relative;
      margin: 0 20px 0px -20px;

      &:before {
        content: '';
        position: absolute;
        right: -20px;
        top: 0;
        border-right: 10px solid transparent;
        border-bottom: 18px solid transparent;
        border-left: 10px solid #909399;
      }

      &:after {
        content: "";
        position: absolute;
        right: -10px;
        bottom: 0;
        border-right: 10px solid transparent;
        border-top: 10px solid transparent;
        border-bottom: 18px solid #909399;
      }

      &.disable {
        background: #ff4949;

        &:before {
          content: '';
          border-left: 10px solid #ff4949;
        }

        &:after {
          content: "";
          border-bottom: 18px solid #ff4949;
        }
      }
    }

    h2 {
      font-weight: bold;
      font-size: 20px;
      color: #323233;
      margin: 0;
      padding: 0;
    }
  }

  .more-pic-bar {
    text-align: left;

    .upload-remove-bar {
      display: inline-block;
      vertical-align: top;
      margin-top: 10px;
    }
  }

  .el-upload-box {
    text-align: center;
    display: inline-block;
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 65px;
    height: 65px;
    line-height: 64px;
    vertical-align: top;
    margin-top: 10px;

    i {
      font-size: 28px;
      color: #8c939d;
    }
  }

  .icon {
    width: 0.5em;
    height: 0.5em;
  }

  .close-icon {
    position: absolute;
    right: -10px;
    top: -15px;
    width: 31px;
    height: 40px;
    padding: 0 7px;
    cursor: pointer;
    z-index: 3;
  }

  .user-avatar {
    width: 65px;
    height: 65px;
    display: block;
    padding: 1px;
  }

  .box-card {
    margin-bottom: 20px;
  }

  .header_title {
    font-weight: bold;
  }

  .goods-title {
    color: #155bd4;
    line-height: 1.2;
  }

  .tips {
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }

  // 2行文字展示
  .line-2 {
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }

  .table-input {
    min-width: 260px;
  }
</style>
